<template>
  <div class="poscontent">
    <div class="flexrowbetween pl_20 pr_20">
      <div class="flex">
        <div
          class="btnitem f-14 mr_15 commhover"
          :class="{ active: active == 1 }"
          @click="changeItem(1)"
        >
          广告位管理
        </div>
        <div
          class="btnitem f-14 commhover"
          :class="{ active: active == 2 }"
          @click="changeItem(2)"
        >
          展示区
        </div>
      </div>
      <div>
        <el-button
          v-if="active == 1"
          type="primary"
          size="small"
          class="pl_15 pr_15"
          @click="handleAdd"
        >
          新增
        </el-button>
      </div>
    </div>
    <div class="listwrap">
        <!-- 广告位管理 -->
        <AdverList v-if="active == 1" ref="adverlist" :plateId="plateId" :type="active" @edit='handleEdit' />
        <!-- 展示区 -->
        <ShowList v-if="active == 2" ref="adverlist" :plateId="plateId" :type="active" />
    </div>

    <el-dialog
      :title="title"
      :visible.sync="open"
      width="680px"
      :before-close="handleClose"
      :close-on-click-modal="false"
      append-to-body
      class="commdia"
    >
      <adv-form v-if="open" :plateId="plateId" :advId='advId' @reflush="reflush" />
    </el-dialog>
  </div>
</template>
<script>
import AdverList from "./AdverList.vue";
import ShowList from "./ShowList.vue";

import AdvForm from "./AdvForm.vue";
export default {
  data() {
    return {
      active: 1,
      title: "广告位新增",
      open: false,
      advId:''
    };
  },
  props: {
    plateId: {
      require: true,
      default: "",
    },
  },
  components: {
    AdverList,
    AdvForm,
    ShowList
  },
  methods: {
    changeItem(val) {
      this.active = val;
    },

    handleAdd() {
      this.open = true;
      this.advId = ''
      this.title = "广告位新增";
    },

    handleEdit(item){
      console.log('编辑,', item)
      this.advId = item.id;
      this.title = "广告位编辑";
      this.open = true;
    },

    handleClose() {
      this.open = false;
    },

    reflush() {
      this.handleClose();
      this.$refs.adverlist.handleQuery();
    },
  },
};
</script>
<style lang="scss" scoped>
.poscontent {
  // 56 导航栏的高 46 tab的高度 35 padding的高度
  height: calc(100vh - 56px - 46px - 35px);
//   overflow-y: auto;
  overflow-x: hidden;
}
.btnitem {
  width: 106px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  color: #1670f1;
  border: 1px solid #1670f1;

  &.active {
    background-color: #1670f1;
    color: #fff;
  }
}
.listwrap{
    height: calc(100% - 42px);
    overflow-y: auto;
    margin-top: 10px;
}
</style>